<template>
    <admin-main :breadcrumbs="breadcrumbs">
        <fold-panel id="authority_roles" title="AUTHORITY ROLES" v-show="dataList.length !== 0">
            <data-table class="table-hover table-bordered" :tableHead="trList" :tableData="dataList"
                        :insert="inset" :edit="edit" :trash="trashRole"></data-table>
        </fold-panel>
        <fold-panel id="authority_permissions" title="Authority Permissions" v-show="pDataList.length !== 0">
            <data-table class="table-bordered table-hover" :tableHead="trList" :tableData="pDataList" :edit="editPermission"
                        :insert="insertPermission"></data-table>
        </fold-panel>
        <loading :isLoading="dataList.length === 0"></loading>
    </admin-main>
</template>

<script>
    /* eslint-disable no-undef,eqeqeq */
    import AdminMain from '../AdminMain.vue';
    import FoldPanel from 'vue-fiu-ui/src/main/js/components/panel/FoldPanel.vue';
    import DataTable from 'vue-fiu-ui/src/main/js/components/table/DataTable.vue';
    import Loading from '../../layout/Loading.vue';

    export default {
        components: {
            Loading,
            DataTable,
            FoldPanel,
            AdminMain
        },
        data () {
            return {
                trList: [
                    {text: 'id'},
                    {text: 'name'},
                    {text: 'display name'},
                    {text: 'description'},
                    {text: 'Updated At'}
                ],
                dataList: [],
                breadcrumbs: {
                    title: '权限管理',
                    data: [
                        {to: {name: 'Home'}, icon: 'fa-home', cut: true, disabled: false, text: 'Home'},
                        {to: '#', icon: 'fa-users', cut: true, disabled: false, text: 'Users'},
                        {to: '#', cut: false, disabled: true, text: '权限管理'}
                    ]
                },
                pDataList: []
            };
        },
        methods: {
            updateDataList () {
                axios.get('/role/list').then((res) => {
                    if (!res.data.success) {
                        this.$notify.open({content: JSON.stringify(res.data.data)});
                        return 0;
                    }
                    this.setDataList(res.data.data);
                });
            },
            updatePDataList () {
                axios.get('/permission/list').then((res) => {
                    if (res.data.success) {
                        this.setDataList(res.data.data, 0);
                    } else {
                        this.filed(res.data.data);
                    }
                });
            },
            setDataList (data, type = 1) {
                let d = [];
                for (let k in data) {
                    let t = {
                        id: data[k].id,
                        data: [
                            data[k].id,
                            data[k].name,
                            data[k].display_name,
                            data[k].description,
                            data[k].updated_at
                        ]
                    };
                    d.push(t);
                }
                if (type === 1) {
                    this.dataList = d;
                } else {
                    this.pDataList = d;
                }
            },
            edit (id) {
                axios.get(`/role/info/${id}`).then((res) => {
                    if (res.data.success) {
                        let d = res.data.data;
                        this.$modal.open({
                            title: `编辑 Role [${d.name}]`,
                            content: `<form onsubmit="return false">
<div class="form-group">
    <label for="name">name:</label>
    <input type="text" class="form-control" id="name_" required value="${d.name}">
</div>
<div class="form-group">
    <label for="name">display name:</label>
    <input type="text" class="form-control" id="display_name_" required value="${d.display_name}">
</div>
<div class="form-group">
    <label for="name">description:</label>
    <input type="text" class="form-control" id="description_" required value="${d.description}">
</div>
<div class="form-group">
    <label>权限:</label>
    ${this.getPermission(res.data.data.perms)}
</div>
</form>`
                        }, (el, modal) => {
                            this.updateRole(
                                d.id,
                                $('#name_').val(),
                                $('#display_name_').val(),
                                $('#description_').val(),
                                this.getPermissionIds()
                            );
                            modal.modal('hide');
                        });
                    } else {
                        this.filed(res.data.data);
                    }
                });
            },
            trashRole (id) {
                this.$modal.open({
                    title: '确认删除?',
                    content: '???'
                }, (el, m) => {
                    axios.post('/role/remove', {id: id}).then((res) => {
                        if (res.data.success === false) {
                            this.filed(res.data.data);
                        } else {
                            this.updateDataList();
                            this.succeeded(res.data.data);
                        }
                    });
                    m.modal('hide');
                });
            },
            inset () {
                this.$modal.open({
                    title: '添加一个角色',
                    content:
                        `<form onsubmit="return false" id="addAuthority">
<div class="form-group">
    <label for="name">name:</label>
    <input type="text" class="form-control" id="name" required>
</div>
<div class="form-group">
    <label for="display name">display name:</label>
    <input type="text" class="form-control" id="display_name" required>
</div>
<div class="form-group">
    <label for="description">description:</label>
    <input type="text" class="form-control" id="description" required>
</div>
</form>`
                }, (el, modal) => {
                    let name = $('#name').val();
                    let displayName = $('#display_name').val();
                    let description = $('#description').val();
                    this.addAuthority(name, displayName, description);
                    modal.modal('hide');
                });
            },
            addAuthority (name, displayName, description) {
                axios.post('/role/add', {
                    name: name,
                    display_name: displayName,
                    description: description
                }).then((res) => {
                    if (res.data.success) {
                        this.succeeded(res.data.data);
                        this.updateDataList();
                    } else {
                        this.filed(res.data.data);
                    }
                });
            },
            updateRole (id, n, dn, des, perms) {
                axios.post('/role/update', {
                    id: id,
                    name: n,
                    display_name: dn,
                    description: des,
                    permissions: perms
                }).then((res) => {
                    if (res.data.success) {
                        this.succeeded('Update Successfully');
                        this.updateDataList();
                    } else {
                        this.filed(res.data.data);
                    }
                });
            },
            editPermission (id) {
                axios.get('/permission/info/' + id).then((res) => {
                    if (res.data.success === true) {
                        let d = res.data.data;
                        this.modalPermission('编辑permission', '/permission/update', d.id, d.name, d.display_name, d.description);
                    } else {
                        this.filed(res.data.data);
                    }
                });
            },
            insertPermission () {
                this.modalPermission('添加permission', '/permission/insert', 0, '', '', '');
            },
            filed (d) {
                this.$notify.open({
                    fixed: 'top-right',
                    type: 'warning',
                    content: JSON.stringify(d)
                });
            },
            succeeded (d) {
                this.$notify.open({
                    fixed: 'top-right',
                    type: 'success',
                    content: d
                });
            },
            getPermission (perms) {
                let html = '';
                for (let k in this.pDataList) {
                    html += `<div class="form-group display-inline m-l-15"><label><input type="checkbox" value="${this.pDataList[k].id}" ${this.inPerms(perms, this.pDataList[k].id)}>${this.pDataList[k].data[2]}</label></div>`;
                }
                return html;
            },
            inPerms (perms, id) {
                for (let k in perms) {
                    if (id == perms[k].id) {
                        return 'checked';
                    }
                }
                return '';
            },
            getPermissionIds () {
                let list = $('.form-group input[type="checkbox"]');
                let array = [];
                for (let i = 0; i < list.length; i++) {
                    if ($(list[i]).prop('checked')) {
                        array.push(list[i].value);
                    }
                }
                return array;
            },
            modalPermission (title, url, id, name, displayName, description) {
                this.$modal.open({
                    title: title,
                    content: `<form onsubmit="return false">
<input type="hidden" id="id_permission" value="${id}">
<div class="form-group">
    <label for="name">name:</label>
    <input type="text" class="form-control" id="name_permission" required value="${name}">
</div>
<div class="form-group">
    <label for="name">display name:</label>
    <input type="text" class="form-control" id="display_name_permission" required value="${displayName}">
</div>
<div class="form-group">
    <label for="name">description:</label>
    <input type="text" class="form-control" id="description_permission" required value="${description}">
</div>
</form>`
                }, (el, m) => {
                    axios.post(url, {
                        id: $('#id_permission').val(),
                        name: $('#name_permission').val(),
                        display_name: $('#display_name_permission').val(),
                        description: $('#description_permission').val()
                    }).then((res) => {
                        if (res.data.success === false) {
                            this.filed(res.data.data);
                        } else {
                            this.succeeded(res.data.data);
                        }
                    });
                    m.modal('hide');
                    this.updatePDataList();
                });
            }
        },
        mounted () {
            this.updateDataList();
            this.updatePDataList();
            document.title = 'Authority';
        }
    };
</script>

<style>

</style>
